<template>
  <div class="app-container">
    <el-form ref="dynamicValidateForm" label-width="60px" class="demo-dynamic" :inline="true">
      <el-form-item
        label="会员名"
      >
        <el-input v-model="searchName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click.prevent="search(searchName)">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="memberList" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <!-- <el-table-column label="会员编号" prop='memberId'>
      </el-table-column> -->
      <el-table-column label="姓名" prop='name'>
      </el-table-column>
      <el-table-column label="手机号" prop='phone'>
      </el-table-column>
      <el-table-column label="推荐人" prop='recommendId'>
      </el-table-column>
      <el-table-column label="安置人" prop='settleId'>
      </el-table-column>
      <el-table-column label="等级" prop='grade'>
      </el-table-column>
      <el-table-column label="原始基因链" prop='originGene'>
      </el-table-column>
      <el-table-column label="流动基因链" prop='flowGene'>
      </el-table-column>
      <el-table-column label="电子币" prop='elecCoin'>
      </el-table-column>
      <el-table-column label="复销" prop='resell'>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click.prevent="editMember(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click.prevent="lockMember(scope.row)" type="text" size="small">锁定</el-button>
          <el-button @click.prevent="FreezeMember(scope.row)" type="text" size="small">冻结</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column class-name="status-col" label="Status" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{scope.row.display_time}}</span>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
import { getMembers } from '@/api/member'

export default {
  name: 'member',
  data() {
    return {
      memberList: null,
      listLoading: true,
      searchName: ''
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getMembers().then((response) => {
        const data = response.data.result
        this.memberList = data
      })
      this.listLoading = false
      // getList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.listLoading = false
      // })
    },
    search(name) {},
    editMember(row) {},
    lockMember(row) {},
    freezeMember(row) {}
  }
}
</script>
